<template>
  <el-container class="layout-admin">
    <!-- 侧边栏 -->
    <el-aside>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#2C2C34"
        text-color="#ffffff"
        active-text-color="#ffffff"
        :collapse="isCollapse"
        router
      >
        <div class="logo-container">
          <i class="iconfont icon-vue"></i>
          DJ's Blog Admin
        </div>
        <el-menu-item index="/adminDJ/index">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/adminDJ/blog">
          <i class="el-icon-menu"></i>
          <span slot="title">博客管理</span>
        </el-menu-item>
        <el-menu-item index="/adminDJ/category">
          <i class="el-icon-setting"></i>
          <span slot="title">分类</span>
        </el-menu-item>
        <el-menu-item index="/adminDJ/tag">
          <i class="el-icon-setting"></i>
          <span slot="title">标签管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 右侧部分 -->
    <el-container class="right-warp">
      <!-- 头部 -->
      <el-header>
        <i @click="toggleMenu" class="el-icon-s-fold"></i>
        <div class="header-right">
          <span class="logout" @click="logout"
            >退出登陆<i class="el-icon-position"></i
          ></span>
        </div>
      </el-header>
      <!-- 主体部分 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Layout",
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    toggleMenu() {
      this.isCollapse = !this.isCollapse;
    },
    logout() {
      this.$confirm("确定要退出登陆吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(() => {
        console.log("logout");
        localStorage.removeItem("token");
        this.$router.push("/login");
      });
    }
  },
  async created() {
    // const { data: res } = await this.$api.user.checkToken();
    // console.log(res);
  }
};
</script>

<style lang="scss" scoped>
.layout-admin {
  --page-min-width: 980px;
  --menu-width: 220px;

  background-color: #f6f8f9;
  min-width: var(--page-min-width);

  .el-aside {
    width: auto !important;
    background-color: #2c2c34;
  }

  .el-header {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;

    i.el-icon-s-fold {
      cursor: pointer;
    }

    .logout {
      font-size: 14px;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: var(--menu-width);
    border-right: none;
  }

  .el-menu {
    min-height: 100vh !important;
  }

  ::v-deep.el-menu-item.is-active {
    background-color: #1890ff !important;
  }

  .logo-container {
    height: 75px;
    text-align: center;
    line-height: 75px;
    color: white;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    .icon-vue {
      font-size: 22px;
      font-weight: 400;
    }
  }

  .right-warp {
    .el-main {
      width: 100%;
    }
  }
}
</style>
